<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <h:form id="form" enctype="multipart/form-data">
                <br/>
                <h2 class="title">Relatório de Cadastro dos Aforamentos</h2>
                <p:growl id="messages" showDetail="false" autoUpdate="true"/> 
                <br/>
                <p:panel id="dadosGeraisPanel" styleClass="container_24 clearfix withoutBorder">
                    <h4 class="title">Filtros</h4>

                    <p:panel id="filtrosPanel" styleClass="clearfix container_24 withoutBorder">

                        <p:outputLabel value="Usuário" styleClass="grid_3"/>
                        <p:autoComplete id="usuario" styleClass="grid_13" dropdown="true" converter="usuarioconverter"
                                        var="usuario" itemLabel="#{usuario.nome}" style="margin-top: -2px"
                                        itemValue="#{usuario}" value="#{managerRelatorioCadastroAforamento.usuario}"
                                        scrollHeight="200" forceSelection="true"
                                        completeMethod="#{managerRelatorioCadastroAforamento.autocompleteUsuario}"/>

                        <p:outputLabel value="Livro" styleClass="grid_2"/>
                        <p:inputText styleClass="grid_4" value="#{managerRelatorioCadastroAforamento.livro}" />

                    </p:panel>

                    <div class="buttonAction">
                        <p:commandButton  id="pesquisarCommandButton" value="Pesquisar" icon="ui-icon-search"
                                          update="@form"
                                          actionListener="#{managerRelatorioCadastroAforamento.pesquisar()}"
                                          styleClass="ui-priority-primary" />
                        <p:commandButton value="Limpar" update="@form" icon="ui-icon-clean"
                                         actionListener="#{managerRelatorioCadastroAforamento.limpar()}" />
                    </div><br/>

                    <p:blockUI id="BLOCK" block="resultPanel" trigger="pesquisarCommandButton, resultTable">
                        <p:graphicImage value="media/images/ajax-loader.gif"/>
                    </p:blockUI>

                    <h4 class="title">Resultado</h4>
                    <p:panel id="resultPanel" styleClass="container_24 clearfix withoutBorder">

                        <p:dataTable id="resultTable" var="usuario" value="#{managerRelatorioCadastroAforamento.usuarios}" 
                                     styleClass="grid_24" rowIndexVar="rowid"
                                     rows="5" paginator="true" lazy="true"   
                                     paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                     currentPageReportTemplate="{currentPage} de {totalPages}"
                                     paginatorPosition="bottom" emptyMessage="Nenhum registro encontrado"
                                     style="white-space: pre-wrap;">

                            <f:facet name="header">
                                <p:outputLabel value="Resultados #{managerRelatorioCadastroAforamento.usuarios.size() eq 0 ? '' : '('.concat(managerRelatorioCadastroAforamento.usuarios.size()).concat(')')}"/>
                            </f:facet> 
                            <p:column style="width:16px">
                                <p:rowToggler />
                            </p:column>
                            <p:column headerText="Ação" width="50">
                                <p:commandButton title="Visualizar detalhes" oncomplete="dlgGrafico.show()"
                                                 icon="ui-icon-zoomin" update=":form:graficoDialog">

                                    <f:setPropertyActionListener target="#{managerRelatorioCadastroAforamento.usuarioDetalhe}" value="#{usuario}" />
                                </p:commandButton>
                            </p:column>

                            <p:column headerText="Usuário">
                                <h:outputText value="#{usuario.nome}"/>
                            </p:column>

                            <p:rowExpansion>

                                <p:dataTable var="livro" value="#{managerRelatorioCadastroAforamento.livro(usuario)}">

                                    <f:facet name="header">
                                        Livro
                                    </f:facet>

                                    <p:column headerText="Ação" width="50">
                                        <p:commandButton title="Visualizar Número da(s) Carta(s)"
                                                         update=":form:detalheDialog"
                                                         icon="ui-icon-zoomin" oncomplete="dlgDetalhe.show()">

                                            <f:setPropertyActionListener target="#{managerRelatorioCadastroAforamento.livroDetalhe}" value="#{livro.livro}" />
                                            <f:setPropertyActionListener target="#{managerRelatorioCadastroAforamento.usuarioDetalhe}" value="#{usuario}" />
                                        </p:commandButton>
                                    </p:column>

                                    <p:column headerText="Número do Livro"> 
                                        <p:outputLabel value="#{livro.livro}"/>
                                    </p:column>

                                    <p:column headerText="Quantidade de Folhas"> 
                                        <p:outputLabel value="#{livro.quantidadeFolhas}"/>
                                    </p:column>

                                </p:dataTable>
                            </p:rowExpansion>
                        </p:dataTable>

                    </p:panel>

                </p:panel>

                <p:dialog id="detalheDialog" header="Número da(s) Carta(s) de Aforamento" widgetVar="dlgDetalhe"
                          modal="true" width="745" dynamic="true" closable="false" resizable="false" closeOnEscape="true">

                    <div style="width: 100%">
                        <ui:repeat value="#{managerRelatorioCadastroAforamento.numeroCartasLivro()}" var="aforamento" varStatus="index">
                            <h:outputLink value="editaraforamento.xhtml?aforamentoID=#{aforamento.id}" style="text-decoration: none">
                                #{index.last ? aforamento.cartaNumero : aforamento.cartaNumero.concat(', ')}
                            </h:outputLink>
                        </ui:repeat>
                    </div>

                    <div class="buttonAction">
                        <p:commandButton value="Fechar" icon="ui-icon-close"
                                         oncomplete="dlgDetalhe.hide()" />
                    </div>
                </p:dialog>

                <p:dialog id="graficoDialog" header="Gráfico" widgetVar="dlgGrafico" 
                          modal="true" width="745" closable="false" 
                          resizable="false" closeOnEscape="true" dynamic="true">

                    <p:outputLabel value="Data" styleClass="grid_3" for="dateCalendar"/>
                    <p:calendar id="dateCalendar" value="#{managerRelatorioCadastroAforamento.dataInicial}" 
                                showOn="both" locale="pt" yearRange="1900:2020" immediate="true"
                                navigator="true" pattern="dd/MM/yyyy" styleClass="grid_8">
                        <p:ajax event="dateSelect" listener="#{managerRelatorioCadastroAforamento.criarGraficoCadastro()}"
                                update=":form:linear"/>
                    </p:calendar>
                    <div class="clear"/>

                    <p:panel>
                        <p:lineChart id="linear" value="#{managerRelatorioCadastroAforamento.criarGraficoCadastro()}" legendPosition="e"  
                                     title="Quantidade de livros por dia - #{managerUtilitario.mes(managerRelatorioCadastroAforamento.dataInicial)}"
                                     minY="0" maxY="50" xaxisLabel="Dia" yaxisLabel="Quantidade" 
                                     style="height:300px"/>
                    </p:panel>

                    <div class="buttonAction">
                        <p:commandButton value="Fechar" icon="ui-icon-close"
                                         oncomplete="dlgGrafico.hide()" />
                    </div>
                </p:dialog>

            </h:form>
        </ui:define>
    </ui:composition>
</html>
